<template>
  <span class="x-icon" v-bind="$attrs">
    <svg :width="props.size" :height="props.size" ref="svgRef">
      <image :href="path" :width="props.size" :height="props.size"></image>
    </svg>
  </span>
</template>
<script setup lang="ts">
const props = defineProps({
  name: {
    type: String,
    default: 'x-home',
  },
  size: {
    type: [String, Number],
    default: 24,
  },
});
const svgRef = ref(null);
const path = computed(() => {
  return new URL(`../../../assets/icons/${props.name}.svg`, import.meta.url)
    .href;
});
const isAntdIcon = computed(() => {
  return props.name.indexOf('x-') === -1;
});
onMounted(() => {
  console.log(svgRef.value);

  svgRef.value.addEventListener('load', () => {
    svgRef.value.style.fill = '#f40';
  });
});
</script>
<style lang="scss" scoped></style>
